<template>
  <view v-if="showFlag">
    <u-toast ref="uToast" />
    <view class="img-a">
      <view class="t-b"> 欢迎使用涨查查数据分析 </view>
    </view>
    <view class="login-view">
      <view class="t-login">
        <form class="cl"></form>
      </view>
    </view>
    <view class="buttom">
      <button @click="onuseInfo" class="clearBtn">
        <view class="loginType">
          <view class="item">
            <view class="icon">
              <u-icon size="160" name="weixin-fill" color="rgb(83,194,64)"></u-icon>
            </view>
            请点击微信图标登录
          </view>
        </view>
      </button>
      <div class="item-check"></div>
      <view class="hint">
        <u-checkbox-group>
          <u-checkbox v-model="checked" active-color="green"></u-checkbox>
        </u-checkbox-group>
        <text>阅读</text>
        <text class="txt-xy" @tap.stop="toService">《服务协议》</text>
        与<text class="txt-xy" @tap.stop="toPrivacy">《隐私政策》</text>
      </view>

      <view class="f-c-c">
        <view><text style="margin-left: 5rpx; color: #5e81f4">粤ICP备2024270380号</text></view>
        <view class="margin-left-xs">深圳市极连科技有限公司</view>
      </view>
    </view>
    <u-top-tips ref="uTips"></u-top-tips>
  </view>
</template>
<script>
import { loginFn } from 'api/login.js'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      checked: false,
      showFlag: false
    }
  },
  computed: {
    ...mapState(['vuex_version', 'vuex_token'])
  },
  created() {
    // console.error('我加载了没?')
    if (this.vuex_token) {
      // console.error('我跳转week/index?')
      uni.switchTab({
        url: '/pages/week/index'
        // url: 'pages/center/center'
      })
    } else {
      this.showFlag = true
    }
  },
  methods: {
    toService() {
      this.$u.route({
        url: '/pages/login/common',
        params: {
          name: 'service'
        }
      })
    },
    toPrivacy() {
      this.$u.route({
        url: '/pages/login/common',
        params: {
          name: 'privacy'
        }
      })
    },
    checkboxChange(val) {
      console.log(val, '6666666666')
    },
    onuseInfo(e) {
      console.log(this.vuex_version, '333')
      if (!this.checked) {
        this.$refs.uTips.show({
          title: '请先阅读以下政策！',
          type: 'warning',
          duration: '2000'
        })
        return false
      }

      let that = this
      wx.getUserProfile({
        desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: obj => {
          wx.login({
            async success({ code, errMsg }) {
              if (code) {
                const datas = {
                  code,
                  nickName: obj.userInfo.nickName,
                  avatarUrl: obj.userInfo.avatarUrl
                }
                // console.log(that.checked, '5555555555')
                const { data } = await loginFn(datas)
                // 登录成功初始化token与用户信息
                that.$u.vuex('vuex_token', data.token)
                if (data.avatarUrl) {
                  obj.userInfo.avatarUrl = data.avatarUrl
                }
                obj.userInfo.nickName = data.nickName
                that.$u.vuex('vuex_user', obj.userInfo)
                console.log(obj.userInfo, '个人信息')
                that.$u.vuex('vuex_account', data.account)
                that.show = true
                uni.switchTab({
                  url: '/pages/week/index'
                })
              } else {
                console.log('登录失败！' + res.errMsg)
              }
            }
          })
        }
      })
    }
  }
}
</script>

<style>
page {
  background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.txt {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.img-a {
  width: 100%;
  height: 450rpx;
  background-image: url(https://zhoukaiwen.com/img/loginImg/head.png);
  background-size: 100%;
}

.t-b {
  text-align: left;
  font-size: 42rpx;
  color: #ffffff;
  padding: 180rpx 0 0 160rpx;
  font-weight: bold;
  line-height: 70rpx;
}

.buttom {
  width: 100%;
  border-top-left-radius: 50rpx;
  border-top-right-radius: 50rpx;
  .loginType {
    padding: 340rpx 0 0 0;
    justify-content: center;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: $u-tips-color;
      font-size: 24rpx;
    }
  }

  .hint {
    width: 100vw;
    font-size: 24rpx;
    position: fixed;
    display: flex !important;
    justify-content: center;
    bottom: 50rpx;
    color: $u-tips-color;
    text-align: center;
  }
}

.clearBtn {
  margin: 0;
  padding: 0;
  line-height: 1;
  background-color: #ffffff;
}

.clearBtn::after {
  position: unset !important;
  border: unset;
}
.f-c-c {
  position: fixed;
  bottom: 20rpx;
  width: 100vw;
  font-size: 20rpx;
  display: flex !important;
  justify-content: center;
  align-items: end;
}

.margin-bottom-lg {
  margin-bottom: 0rpx;
}
.margin-left-xs {
  margin-left: 10rpx;
}
.txt-xy {
  padding: 0 8rpx;
  color: #5e81f4;
  text-decoration: underline;
}
.aa {
  height: 100%;
  width: 100%;
}
.item-check {
  display: flex;
  margin-top: 10px;
  font-size: 12px;
  color: $u-tips-color;
  justify-content: center;
}
</style>
